<template>
  <div>
    <!-- 团体积分主页 -->
    <div class="header" :style="{ 'background-image': 'url(' + bgUrl + ')' }">
      <img :src="getStaticFileUrl(photoUrl)" alt="">
      <p class="biaoTi" :style="{ 'color': bgUrl ? '#fff' : '#000' }">{{ header }}</p>
    </div>
    <router-view />
  </div>
</template>
<script>
import { api_GET_EventsManagementDelegationId } from '@/extend/api/gameswaggerApi/app';
import {
  api_GET_CMSAdvert
} from '@/extend/api/game.js';
export default {
  data() {
    return {
      header: '',
      photoUrl: '',
      bgUrl: ''
    };
  },
  created() {
    this.getImg();
    this.getListData();
  },
  methods: {
    // 获取图片
    getImg() {
      var that = this;
      const form = {
        orgId: WEB_CONFIG.VUE_APP_ORGID,
        positionCode: 'POINT_RANK'
      };
      api_GET_CMSAdvert(form).then(res => {
        const url = res.data[0].advert_url || '';
        that.bgUrl = url ? WEB_CONFIG.VUE_APP_STATIC_FILE_RUL_CMS + '/cms/img/' + url : '';
      }).catch(error => {
        that.$message({ type: 'error', message: error.error.message });
      });
    },
    getListData() {
      api_GET_EventsManagementDelegationId(this.$route.query.gid).then(res => {
        this.header = res.name;
        this.photoUrl = res.imagePath;
      }, error => {
        this.loading = false;
        const _msg = error.error.message || error.message;
        this.$message({ type: 'error', message: _msg });
      });
    },
    // 获取静态文件
    getStaticFileUrl(relativeUrl) {
      if (relativeUrl) {
        return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
      } else {
        return require('@/assets/images/face_default.png');
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.header{
  width: 100%;
  height: 360px;
  background-size: 100% 360px;
  padding-top: 60px;
}
img{
  width: 120px;
  height: 120px;
  display: block;
  margin-left: 50%;
  margin-bottom: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
}
.biaoTi{
  text-align: center;
  color: white;
  font-size: 52px;
  font-family: FZHanZhenGuangBiaoS-GB, FZHanZhenGuangBiaoS-GB-Regular;
}
</style>
